<template>
  <div style="margin: 0 8px;">
    <n-button block @click="handleCreateNote">
      <template #icon>
        <svg-icon name="person" />
      </template>
      新建笔记
    </n-button>
  </div>

  <n-menu
    v-model:value="selectedKey"
    :options="menuOptions"
    @update:value="handleUpdateValue"
  />

</template>

<script setup>
import { useWindow } from "@/hooks/useWindow.js";
const { createWindow } = useWindow();

import { ref,  } from "vue";
const selectedKey = ref('all');

const emits = defineEmits(['selectMenu']);

// 新建笔记
const handleCreateNote = async() => {
  await createWindow('note', {
    title: '笔记',
    decorations: false,
    width: 700,
    height: 560,
  });
};

import { h } from "vue";
import SvgIcon from "@/components/SvgIcon.vue";
function renderIcon(iconName) {
  return () => h(SvgIcon, { name: iconName });
}

const menuOptions = [
  {
    label: "全部收藏",
    key: "all",
    icon: renderIcon('category'),
  },
  {
    label: "最近使用",
    key: "recentlyUse",
    icon: renderIcon('clock'),
  },
  {
    label: "链接",
    key: "links",
    icon: renderIcon('link'),
  },
  {
    label: "图片和视频",
    key: "media",
    icon: renderIcon('img'),
  },
  {
    label: "笔记",
    key: "note",
    icon: renderIcon('note'),
  },
  {
    label: "文件",
    key: "files",
    icon: renderIcon('folder'),
  },
  {
    label: "位置",
    key: "positions",
    icon: renderIcon('position'),
  },
  {
    key: 'divider-1',
    type: 'divider',
    props: {
      style: {
        marginLeft: '32px'
      }
    }
  },
  {
    label: "标签",
    key: "tags",
    icon: renderIcon('tag'),
    children: [
      { key: "food", label: "美食", },
      { key: "music", label: "音乐", },
      { key: "travel", label: "旅游", },
      { key: "sport", label: "运动", },
      { key: "game", label: "游戏", },
      { key: "smoke", label: "吸烟", },
      { key: "drink", label: "喝酒", },
      { key: "permHead", label: "烫头", },
    ]
  }
];

function handleUpdateValue(key, item) {
  console.log('当前选中的项', key, item)
  emits('selectMenu', item)
}
</script>

<style scoped>

</style>
